<template>
  <div class="btn">
    dialog弹窗组件
    <el-button @click="openDialog">点击打开dialog</el-button>
    <vc-dialog v-model="showDialog" width="50%" title="许可变更明细（3次）" title-align="center" @open="onDialogOpen" @close="onDialogClose">这是dialog内部</vc-dialog>
  </div>
  <div class="btn">
    <vc-datepicker title="datepicker日期选择组件" type="date" @submit="onDatePickerSubmit" />
    <vc-datepicker title="dateRangePicker日期范围组件" type="daterange" :shortcuts="[30, 365, 365 * 3]" @submit="onDatePickerSubmit" />
  </div>
  <div class="btn">
    <vc-datepicker title="yearpicker年份选择组件" type="year" @submit="onDatePickerSubmit" />
  </div>
  <div class="btn">
    multiple-select多选组件
    <vc-multiple-select title="上市/发债" :options="options" @submit="onMultipleSelectSubmit" />
  </div>
  <div class="btn">
    cascader-select级联组件
    <vc-cascader-select title="地区" :options="cascaderOptions" @submit="onCascaderSubmit" />
  </div>
  <div class="btn">
    single-select 单选组件
    <vc-single-select v-model:value="singleValue" :required="false" title="单选" :options="moreOptions" />
  </div>
  <div class="btn">
    tiled-select 更多平铺组件
    <vc-tiled-select title="更多" :options="moreOptions" @submit="onMoreSubmit" />
  </div>
  <div class="btn">
    filter 筛选组件
    <vc-filter :menus="menus" />
  </div>
  <div class="btn">
    nodata无数据组件
    <div class="nodata">
      <vc-nodata :type="104">
        加载失败，请
        <span style="color: #0171f6; cursor: pointer" @click="refreshPage()">点击</span>
        重试
      </vc-nodata>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTabs } from 'vc/src/web';

const { refreshPage } = useTabs();

// 弹窗
const showDialog = ref(false);
const openDialog = () => {
  showDialog.value = true;
};
const onDialogOpen = () => {
  console.log('opened');
};
const onDialogClose = () => {
  console.log('closed');
};

// 日期
const onDatePickerSubmit = (val: string) => {
  console.log('datepickerVal', val);
};

// 多选
const options = ref([
  { name: '农林牧渔', code: '1' },
  { name: '采掘', code: '2' },
  { name: '化工', code: '3' },
  { name: '钢铁', code: '4' },
  { name: '有色金属', code: '5' },
  { name: '电子', code: '6' },
  { name: '汽车', code: '7' },
  { name: '家用电器', code: '8' },
  { name: '建筑业', code: '9' },
  { name: '交通运输', code: '10' },
  { name: '房地产业', code: '11' }
]);
const onMultipleSelectSubmit = (result: string) => {
  console.log('result', result);
};

// 级联
const cascaderOptions = ref([
  {
    label: '一级1',
    value: '1',
    children: [
      {
        label: '一级1_二级1',
        value: '1_1',
        children: [
          {
            label: '一级1_二级1_三级1',
            value: '1_1_1',
            children: []
          },
          {
            label: '一级1_二级1_三级2',
            value: '1_1_2',
            children: []
          }
        ]
      },
      {
        label: '一级1_二级2',
        value: '1_2',
        children: [
          {
            label: '一级1_二级2_三级1',
            value: '1_2_1',
            children: []
          },
          {
            label: '一级1_二级2_三级2',
            value: '1_2_2',
            children: []
          }
        ]
      }
    ]
  },
  {
    label: '一级2',
    value: '2',
    children: [
      {
        label: '一级2_二级1',
        value: '2_1',
        children: [
          {
            label: '一级2_二级1_三级1',
            value: '2_1_1',
            children: []
          },
          {
            label: '一级2_二级1_三级2',
            value: '2_1_2',
            children: []
          }
        ]
      },
      {
        label: '一级2_二级2',
        value: '2_2',
        children: [
          {
            label: '一级2_二级2_三级1',
            value: '2_2_1',
            children: []
          },
          {
            label: '一级2_二级2_三级2',
            value: '2_2_2',
            children: []
          }
        ]
      }
    ]
  }
]);
const onCascaderSubmit = (result) => {
  console.log('cascaderResult', result);
};

const singleValue = ref('');

const option = [
  { name: '全部', code: '' },
  { name: '是', code: '1' },
  { name: '否', code: '0' }
];
const moreOptions = ref<any>([
  {
    name: '是否投产',
    code: '1',
    data: option
  },
  {
    name: '所在地是否属于大气重点控制区',
    code: 'keyAtmosphericControlArea',
    data: option
  },
  {
    name: '所在地是否属于总磷控制区',
    code: 'totalPhosphorusControlArea',
    data: option
  },
  {
    name: '所在地是否属于总氮控制区所在地是否属于总氮控制区所在地是否属于总氮控制区',
    code: 'totalNitrogenControlArea',
    data: option
  },
  {
    name: '所在地是否属于重金属污染特别排放限值实施区域',
    code: 'heavyMetalPollutionLimitArea',
    data: option
  },
  {
    name: '是否属于工业园区',
    code: 'locatedInIndustrialPark',
    data: option
  }
]);

const onSingleSubmit = (params) => {
  singleValue.value = params;
};

const onMoreSubmit = (params) => {
  console.log(params);
};

const menus = [
  {
    title: '地区',
    component: 'cascader-select',
    type: 'area',
    options: cascaderOptions.value,
    submitFn: (val) => {
      console.log('级联', val);
    }
  },
  {
    title: '多选',
    component: 'multiple-select',
    options: options.value,
    submitFn: (val) => {
      console.log('多选', val);
    }
  },
  {
    title: '单选',
    component: 'single-select',
    options: moreOptions.value,
    submitFn: (val) => {
      console.log('单选', val);
    }
  },
  {
    title: '发布日期',
    component: 'datepicker',
    type: 'date',
    submitFn: (val) => {
      console.log('日期', val);
    }
  },
  {
    title: '更多',
    component: 'tiled-select',
    options: moreOptions.value,
    submitFn: (val) => {
      console.log('更多', val);
    }
  }
];
</script>

<style lang="scss" scoped>
.btn {
  margin: 20px;
}
.nodata {
  width: 100%;
  height: 560px;
  border: 1px solid #efefef;
}
</style>
